<template>
    <div id="app">
        <!--保持原状态-->
        <transition name="fade">
            <router-view />
        </transition>

        <!--播放器-->
        <transition name="slide-fade">
            <player v-show="isShowPlayer"></player>
        </transition>
        <!--底部导航-->
        <tab-bar v-show="isShowTabbar"></tab-bar>
    </div>
</template>

<script>
    import TabBar from '@/components/footer/footer'
    import Player from "@/components/player/player";

    import {mapState} from 'vuex'

    export default {
        name: 'App',
        computed: {
            ...mapState({
                isShowTabbar: "isShowTabbar",
                isShowPlayer: "isShowPlayer"
            })
        },
        components: {
            Player,
            TabBar
        },
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .fade-enter-active{
        transition: opacity 1s;
    }
    .fade-enter /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

    /* 播放器显示与隐藏效果 */
    .slide-fade-enter-active {
        transition: all 1s ease;
    }
    .slide-fade-leave-to
    {
        transition: all 1s ease;
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateY(80px);
    }
</style>
